<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
  </head>
<body>

  <h3>污染城市列表</h3>
  <ul id="aqi-list">
<!--   
    <li>第一名：福州（样例），10</li>
      <li>第二名：福州（样例），10</li> -->
  </ul>

<script type="text/javascript">

var aqiData = [
  ["北京", 90],
  ["上海", 50],
  ["福州", 10],
  ["广州", 50],
  ["成都", 90],
  ["西安", 100]
];

(function () {

  /*
  在注释下方编写代码
  遍历读取aqiData中各个城市的数据
  将空气质量指数大于60的城市显示到aqi-list的列表中
  */
    // get elem
    var $ = function(id){
        return document.getElementById(id);
    }

    // popSort
    // var popSort = function(arr){
    //     for(var x = 0 ; x < arr.length; x++){//控制趟数 
    //         for(var y = x + 1 ; y < arr.length ; y++){ 
    //         //依次比较，如果后面的元素大于前面的元素则交换 
    //             if(arr[x][1] < arr[y][1]){ 
    //             var temp = arr[x]; 
    //             arr[x] = arr[y]; 
    //             arr[y] = temp; 
    //             } 
    //         }
    //     } 
    // }; 
    
    // filter arr
    var aqiList = [];    
    aqiData.forEach(function(item,index){
        if (item[1] > 60) {
            aqiList.push(item);
        }
    });
    // popSort(aqiList);
    aqiList.sort(function(a,b) {
        return b[1]-a[1];
    });

    // get html
    var getHtml = function(arr) {
        var li = "";
        arr.forEach(function(item,index){
            var rank = index + 1;
            var text = "<li>" + "第" + rank + "名：" + arr[index][0] + "," + arr[index][1] + 
            "</li>";
            li = li + text;
        });
        return li;
    };
    var html = getHtml(aqiList);

    // render
    $("aqi-list").innerHTML = html;




})();

</script>
</body>
</html>